<template>
  <el-dialog
    :close-on-click-modal="false"
    title="请确认是否合并发货"
    :visible.sync="visible"
    class="deliver-dialog"
    append-to-body
    width="50%"
  >
    <div class="deliver-confirm">
      <el-table :data="data" stripe border>
        <el-table-column label="患者姓名" prop="patientName"></el-table-column>
        <el-table-column label="收货人" prop="username">
          <template slot-scope="scope" v-if="scope.row.orderAddress">
            <span>{{ scope.row.orderAddress.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货号码" prop="phone">
          <template slot-scope="scope" v-if="scope.row.orderAddress">
            <span>{{phoneData(scope.row.orderAddress.phone)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" prop="address">
          <template slot-scope="scope" v-if="scope.row.orderAddress">
            <span>{{ scope.row.orderAddress.province }}{{ scope.row.orderAddress.city }}{{ scope.row.orderAddress.area }}{{ scope.row.orderAddress.address }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">返回</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { phoneData } from "@/utils/index";

export default {
  name: "deliverConfirm",
  data() {
    return {
      visible: false,
      data: [],
    }
  },
  methods: {
    phoneData,
    open(orderList) {
      this.data = orderList;
      this.visible = true;
    },
    onClose(){
      this.visible = false;
    },
    onSubmit() {
      this.$emit("confirm");
      this.onClose();
    }
  }
}
</script>